CSS Tooltip

Here in this advance CSS tutorial, we will be going to learn how to create tooltip using CSS.

ToolTip

A tooltip is a popup text which is used to tell the extra information about the element content when the user hovers the mouse or cursor over the element content. In CSS we do not have a specific property to create a tooltip, so we use some logic to create one. The example gives blow creates a tooltip that shows the extra information if the user hovers the mouse over the content. 

<!DOCTYPE html>
<html>
    <head>
        <style>
            .tooltip {
              position: relative;
              display: inline-block;
              text-decoration: underline;
            }

            .tooltip .tiptext {
              visibility: hidden;
              width: 150px;
              text-align: center;
              border: 2px solid green;
              padding: 5px 0;
              /*set postion of the tooltip text */
              position: absolute;
              z-index: 1;
            }

            /*visible the tooltip text when user hover the mouse over*/
            .tooltip:hover .tiptext {
              visibility: visible;
            }
        </style>
    </head>
    <body>
    <div class="tooltip">Hover Over Me
      <span class="tiptext">The Text</span>
    </div>
    </body>
</html>

Behind the code

HTML

In the above example, we created a container <div class="tooltip"> which contain the tooltip and when the user hove over its content the tooltip text shows up. In the same div tag, we defined a <span> element with class=”tiptext” which contains the tooltip text.

CSS

For the tooltip class we use the position:relative , because we want the tooltip text postion:absolute . And the tiptext class v isibility:hidden make the tooltip text hidden until the user hover over the <div> content.

Position the Tooltip Text

We can set the position of the tooltip text by mentioning the properties like left, top, bottom, and right.

Right Positioning Tooltip Example 

<!DOCTYPE html>
<html>
    <head>
        <style>
            .tooltip {
              position: relative;
              display: inline-block;
              text-decoration: underline;
            }

            .tooltip .tiptext {
              visibility: hidden;
              width: 120px;
              border: 2px solid green;
              background-color: lightblue;
              color: red;
              text-align: center;
              border-radius: 6px;
              padding: 6px 0px;
              /* Position the tooltip */
              position: absolute;
              z-index: 1;
              /*top is -6 because padding is 6*/
              top: -5px;
              left: 100%;
            }
            /*visible the tooltip text when user hover the mouse over*/
            .tooltip:hover .tiptext {
              visibility: visible;
            }
        </style>
    </head>
    <body>
    <div class="tooltip">Hover Over Me
      <span class="tiptext">Right Tool tip text</span>
    </div>
    </body>
</html>

Left Positioning Tooltip Example 

<!DOCTYPE html>
<html>
    <head>
        <style>
            .tooltip {
              position: relative;
              display: inline-block;
              text-decoration: underline;
              left:150px;
            }

            .tooltip .tiptext {
              visibility: hidden;
              width: 120px;
              border: 2px solid green;
              background-color: lightblue;
              color: red;
              text-align: center;
              border-radius: 6px;
              padding: 6px 0px;
              /* Position the tooltip */
              position: absolute;
              z-index: 1;
              /*top is -6 because padding is 6*/
              top: -6px;
              right: 100%;
            }

            /*visible the tooltip text when user hover the mouse over*/
            .tooltip:hover .tiptext {
              visibility: visible;
            }
        </style>
    </head>
    <body>
    <div class="tooltip">Hover Over Me
      <span class="tiptext">Left Tool tip text</span>
    </div>
    </body>
</html>

Top Positioning Tooltip Example 

<!DOCTYPE html>
<html>
    <head>
        <style>
            .tooltip {
              position: relative;
              display: inline-block;
              text-decoration: underline;
              left:150px;
              top: 150px;
            }

            .tooltip .tiptext {
              visibility: hidden;
              width: 120px;
              border: 2px solid green;
              background-color: lightblue;
              color: red;
              text-align: center;
              border-radius: 6px;
              padding: 6px 0px;
              /* Position the tooltip */
              position: absolute;
              z-index: 1;
              /*top is -6 because padding is 6*/
              bottom: 100%;
              left: 50%;
              margin-left: -60px;
            }

            /*visible the tooltip text when user hover the mouse over*/
            .tooltip:hover .tiptext {
              visibility: visible;
            }
        </style>
    </head>
    <body>
    <div class="tooltip">Hover Over Me
      <span class="tiptext">Top Tool tip text</span>
    </div>
    </body>
</html>

Bottom Positioning Tooltip Example 

<!DOCTYPE html>
<html>
    <head>
        <style>
            .tooltip {
              position: relative;
              display: inline-block;
              text-decoration: underline;
              left:150px;
              top: 150px;
            }

            .tooltip .tiptext {
              visibility: hidden;
              width: 120px;
              border: 2px solid green;
              background-color: lightblue;
              color: red;
              text-align: center;
              border-radius: 6px;
              padding: 6px 0px;
              /* Position the tooltip */
              position: absolute;
              z-index: 1;
              /*top is -6 because padding is 6*/
                top: 100%;
                left: 50%;
                margin-left: -60px;
            }

            /*visible the tooltip text when user hover the mouse over*/
            .tooltip:hover .tiptext {
              visibility: visible;
            }
        </style>
    </head>
    <body>
    <div class="tooltip">Hover Over Me
      <span class="tiptext">Bottom Tool tip text</span>
    </div>
    </body>
</html>

Summary

  • Tooltip is a pop-up text which is used to provide the extra information about the element content.
  • Make sure that when the user hover over the element then only the tooltip text should be displayed.
Previous Tutorial Next Tutorial